<script lang="jsx">
import { computed, defineComponent, ref } from 'vue'
import { whetherShareGoods, whetherShareOrder } from '~/pages/template/tools'
import Goods from '~/pages/template/goods.vue'
import Order from '~/pages/template/order.vue'
import { emojistwo, textReplaceEmoji } from '~/utils/emoji'

export default defineComponent({
  props: {
    text: {
      type: String,
      default: '',
    },
  },
  setup(props) {
    const renderType = computed(() => {
      if (whetherShareOrder(props.text))
        return 'order'
      if (whetherShareGoods(props.text))
        return 'goods'
      return 'text'
    })

    // 渲染订单
    const renderOrder = () => {
      const text = whetherShareOrder(props.text)
      if (text) {
        return (
          <div class="border-1px">
            <Order send={false} res={text} />
          </div>
        )
      }
      return null
    }

    // 渲染商品
    const renderGoods = () => {
      const text = whetherShareGoods(props.text)
      if (text && !text.orderItem) {
        return (
          <div class="border-1px px-16px">
            <Goods send={false} res={text} />
          </div>
        )
      }
      return null
    }

    // 渲染文本
    const renderText = () => {
      return (
        <div class="max-w-500px overflow-hidden rounded-5px bg-warmgray-200 px-6px py-5px text-center line-height-25px">
          <span class="text" v-html={textReplaceEmoji(props.text)}></span>
        </div>
      )
    }

    const renderMessage = () => {
      switch (renderType.value) {
        case 'order':
          return renderOrder()
        case 'goods':
          return renderGoods()
        default:
          return renderText()
      }
    }

    return () => (
      <div>
        {renderMessage()}
      </div>
    )
  },
})
</script>

<style scoped>
.text {
  display: flex;
}
</style>
